<template>
	<view>
		<view class="shopBox">
			<view class="shopList" v-for="(item,index) in shopData" :key="index">
				<checkbox :value="item.value"></checkbox>
				<image class="shopImg" :src="item.shopImg"></image>
				<view class="leftBox">
					<view class="shopname tuodiandiandian">{{item.shopname}}</view>
					<text class="shopmoney">￥{{item.shopMoney}}</text>
					<view class="addBox">
						<text class="jian" @click="jian(index)">-</text>
						<text class="shopnum">{{item.shopNum}}</text>
						<text class="jia" @click="jia(index)">+</text>
					</view>
				</view>
			</view>
		</view>
		<view class="fotter">
			<checkbox class="check"></checkbox>
			<text class="allselect">全选</text>
			<view class="rightBox" v-show="isShow">
			<view @click="settbut" class="settBox">
				<text class="settlement">结算</text>
				<text class="settlementNum">({{settlementNum}})</text>
			</view>
			<view class="totalBox">
				<text class="freight">不含运费 </text>
				<text class="totalfont">合计: </text>
				<text class="totalmoney">{{total}}</text>
			</view>
			<text class="discount">已优惠:￥{{discount}}</text>
			</view>
		    <view class="delete" v-show="deleteShow">
				删除
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				settlementNum:'1',
				total:'218.00',
				discount:'10.00',
				edit:'编辑',
				isShow:true,
				deleteShow:false,
		     shopData:[{
				 value:'shopOne',
				 shopImg:'../../static/shangcheng/chanping.png',
				 shopname:'Gucci印花兜帽卫衣',
				 shopMoney:'108.90',
				 shopNum:1,
			 },{
				 value:'shopTwo',
				 shopImg:'../../static/shangcheng/chanping.png',
				 shopname:'男道春装新款人物头像印花男道春装新款人物头像印花男道春装新款人物头像印花男道春装新款人物头像印花',
				 shopMoney:'108.90',
				 shopNum:1,
			 },{
				 value:'shopThree',
				 shopImg:'../../static/shangcheng/chanping.png',
				 shopname:'男装春装新款印花兜帽卫衣',
				 shopMoney:'108.90',
				 shopNum:1,
			 },{
				 value:'shopThree',
				 shopImg:'../../static/shangcheng/chanping.png',
				 shopname:'男装春装新款印花兜帽卫衣',
				 shopMoney:'108.90',
				 shopNum:1,
			 },{
				 value:'shopThree',
				 shopImg:'../../static/shangcheng/chanping.png',
				 shopname:'男装春装新款印花兜帽卫衣',
				 shopMoney:'108.90',
				 shopNum:1,
			 },{
				 value:'shopThree',
				 shopImg:'../../static/shangcheng/chanping.png',
				 shopname:'男装春装新款印花兜帽卫衣',
				 shopMoney:'108.90',
				 shopNum:1,
			 },{
				 value:'shopThree',
				 shopImg:'../../static/shangcheng/chanping.png',
				 shopname:'男装春装新款印花兜帽卫衣',
				 shopMoney:'108.90',
				 shopNum:1,
			 },{
				 value:'shopThree',
				 shopImg:'../../static/shangcheng/chanping.png',
				 shopname:'男装春装新款印花兜帽卫衣',
				 shopMoney:'108.90',
				 shopNum:1,
			 },{
				 value:'shopThree',
				 shopImg:'../../static/shangcheng/chanping.png',
				 shopname:'男装春装新款印花兜帽卫衣',
				 shopMoney:'108.90',
				 shopNum:1,
			 },{
				 value:'shopThree',
				 shopImg:'../../static/shangcheng/chanping.png',
				 shopname:'男装春装新款印花兜帽卫衣',
				 shopMoney:'108.90',
				 shopNum:1,
			 },{
				 value:'shopThree',
				 shopImg:'../../static/shangcheng/chanping.png',
				 shopname:'男装春装新款印花兜帽卫衣',
				 shopMoney:'108.90',
				 shopNum:1,
			 },{
				 value:'shopThree',
				 shopImg:'../../static/shangcheng/chanping.png',
				 shopname:'男装春装新款印花兜帽卫衣',
				 shopMoney:'108.90',
				 shopNum:1,
			 }]
			}
		},
		methods: {
			onNavigationBarButtonTap(e) {
			    	if(this.edit=="编辑"){
			    		this.edit="完成";
			    		this.isShow=false;
			    		this.deleteShow=true;
			    		}else if(this.edit=="完成"){
			    			this.edit="编辑";
			    			this.isShow=true;
			    			this.deleteShow=false;
			    			}
			},
				jian(e){
					if(this.shopData[e].shopNum>1){
						this.shopData[e].shopNum--;
					}
				},
				jia(e){
					this.shopData[e].shopNum++;
				},
				settbut(){
					if(this.settlementNum!=0){
						uni.navigateTo({
						    url: './payOrder'
						});
						}
					}
		}
	}
</script>

<style>
  .shophead{
	  width: 750rpx;
	  height: 100rpx;
	  margin-top: var(--status-bar-height);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  position: fixed;
	  top: 0rpx;
	  z-index: 888;
	  background-color: white;
	  }
	  .shop{
		  font-size:34rpx;
		  font-family:PingFang SC;
		  font-weight:bold;
		  color:rgba(51,51,51,1);
		  
	  }
	  .edit{
		  font-size:30rpx;
		  font-family:PingFang SC;
		  font-weight:bold;	
		  color:#7322D8;
		  position: absolute;
		  right: 40rpx;
	  }
	  .shopBox{
		  margin-bottom: 100rpx;
	  }
	  .shopList{
		  width: 680rpx;
		  height: 200rpx;
		  margin:10rpx 35rpx;
		  display: flex;
		  align-items: center;
	  }
	  .shopImg{
		  width: 120rpx;
		  height: 120rpx;
		  margin-left: 30rpx;
	  }
	  .leftBox{
		  width: 450rpx;
		  height: 198rpx;
		  
		  margin-left: 20rpx;
		  position: relative;
	  }
	  .shopname{
		  width: 100%;
		  font-size:26rpx;
		  font-family:PingFang SC;
		  font-weight:400;
		  color:#666666;
		  line-height: 38rpx;
		  margin-top: 40rpx;
	  }
	  .shopmoney{
		  font-size:30rpx;
		  font-family:FZHei-B01S;
		  font-weight:400;
		  color:rgba(255,59,48,1);
		  position: absolute;
		  top: 125rpx;
	  }
	  .addBox{
		  height: 45rpx;
		  border:2rpx solid rgba(199,199,199,1);
		  border-radius:6px;
		  position: absolute;
		  top: 120rpx;
		  right: 10rpx;
		  display: flex;
		  align-items: center;
		  overflow: hidden;
	  }
	  .jian{
		  display: block;
		  padding: 15rpx;
		  color: #808080;
	  }
	 .shopnum{
		  display: block;
		  padding: 15rpx;
		  border-right: 2rpx solid rgba(199,199,199,1);
		  border-left: 2rpx solid rgba(199,199,199,1);
		  font-size: 20rpx;
		  color: #333333;
	  }
	  .jia{
		  display: block;
		  padding: 15rpx;
		  color: #808080;
	  }
	  .fotter{
		  width: 750rpx;
		  height: 100rpx;
		  position: fixed;
		  display: flex;
		  align-items: center;
		  bottom: 0;
		  background-color: white;
		  }
		  .check{
			  
			  margin-left: 32rpx;
		  }
		  .allselect{
			  font-size:26rpx;
			  font-family:PingFang SC;
			  font-weight:400;
			  color:rgba(51,51,51,1);
			  margin-left: 10rpx;
		  }
		  .rightBox{
			  width: 580rpx;
			  height: 97rpx;
			  }
		  .settBox{
			  width:190rpx;
			  height:70rpx;
			  background:linear-gradient(60deg,rgba(212,32,238,1) 0%,rgba(115,34,216,1) 100%);
			  border-radius:20rpx;
			  position: absolute;
			  top: 15rpx;
			  right: 30rpx;
			  display: flex;
			  justify-content: center;
			  align-items: center;
		  }
		  .settlement{
			  font-size:26rpx;
			  font-family:PingFang SC;
			  font-weight:400;
			  color:rgba(255,255,255,1);
		  }
		  .settlementNum{
			  font-size:26rpx;
			  font-family:PingFang SC;
			  font-weight:400;
			  color:rgba(255,255,255,1);
		  }
		  .totalBox{
			  position: absolute;
			  top: 10rpx;
			  right:235rpx;
		  }
		  .freight{
			  font-size:22rpx;
			  font-family:PingFang SC;
			  font-weight:400;
			  color:#808080;
			  margin-right: 10rpx;
		  }
		  .totalfont{
			  font-size: 26rpx;
			  color: #333333;
			  margin-right: 10rpx;
		  }
		  .totalmoney{
			  font-size: 24rpx;
			  color: #FF3B30;
		  }
		  .discount{
			  font-size: 20rpx;
			  color: #FF3B30;
			  position: absolute;
			  top: 65rpx;
			  right: 235rpx;
			  }
			  .delete{
				  width:150rpx;
				  height:70rpx;
				  background:linear-gradient(60deg,rgba(212,32,238,1) 0%,rgba(115,34,216,1) 100%);
				  border-radius:20rpx;
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  font-size:26rpx;
				  font-family:PingFang SC;
				  font-weight:400;
				  color:rgba(255,255,255,1);
				  position: absolute;
				  right: 30rpx;
				  }
</style>
